<template>
    <div class="blogEdit_box">
        <el-page-header @back="goBack" content="主页">
        </el-page-header>
    

        <el-form ref="form" :model="articleInfo" label-width="40px">
          <!-- <el-form-item label="文章ID">
                <el-input type="textarea" rows="3" v-model="articleInfo.articleId"></el-input>
            </el-form-item> -->
            <el-form-item label="标题">
                <el-input v-model="articleInfo.articleName"></el-input>
            </el-form-item>

            <el-form-item label="分类">
              <!-- // 这里根本没渲染对,后面自己改，我这里教你插入文章 -->
              <!-- <el-select v-model="articleInfo.classList" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in classList"
                    :key="index"
                    :label="item"
                    :value="item.classifyName">
                  </el-option>
              </el-select> -->

              <el-input type="text" v-model="articleInfo.classifyName"></el-input>
            </el-form-item>

            <!-- <el-form-item label="摘要">
                <el-input type="textarea" rows="3" v-model="articleInfo.smallText"></el-input>
            </el-form-item> -->
            
             <el-form-item label="文章标签">
                <el-input type="textarea" rows="3" v-model="articleInfo.labelName"></el-input>
            </el-form-item>
            <el-form-item label="文章描述">
              <el-input type="text" v-model="articleInfo.articleDescription"></el-input>
            </el-form-item>
            <el-form-item label="内容" >
                <!-- <mavon-editor class="content_edit"
                  v-model="articleInfo.description"
                  >
              
                </mavon-editor> -->
                <mavon-editor  v-model="articleInfo.value" class="mavon" :ishljs = "true" ref="md" ></mavon-editor>
              <!-- <textarea v-model="articleInfo.description"></textarea> -->
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="editArticle">
                  <span v-if="isBuild">立即创建</span>
                  <span v-else>保存修改</span>
                </el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

        <div>{{articleInfo}}</div>
    </div>
</template>

<script>

import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import axios from 'axios'
import querystring from 'querystring'
export default {
  components: {
        mavonEditor,
    
  },
  data () {
    return {
      // 文章详情信息（绑点的变量是需要声明的，只做赋值操作可以不声明，否则人家不知道你的变量是什么类型）
      articleInfo: {
        labelName: '', // 之后自己写注释
        articleDescription: '',
        articleName: '',
        classifyName: '',
        value: ''


      },//看不清楚，这是什么类型？对象？字体设置大点我近视啊
      // 判断是否新建
      isBuild: '',
      // // 编辑文章表单
      editArticleFrom: {
        id: '',
        articleDescription: '',
        articleName: '',
        classifyName: '',
        labelName: '',
        value: ''
      },
      // 分类列表
      classList: []
    }
  },
  // 这个代码怎么像是我的？你都没有全局声明$http你也敢用。。。自己改，
  methods: {
    // 根据 id 获取文章
    async getArticle (articleId) {
      console.log('获取文章' + articleId)

      // const { data: res } = await this.$http.get(`/article/get/${articleId}`)
      const { data: res } = await this.$axios.get('http://31f747b701.qicp.vip/blog/article-blog/list/1/10')//这里怎么写死了
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取文章详情失败！')
      this.articleInfo = res.data.article
      console.log(this.articleInfo)
      console.log('111')

      // 因为后端需要根据旧分类查询 T-T
      // this.editArticleFrom.oldCategories = this.articleInfo.categories
      // console.log('T_T')
      // console.log(this.editArticleFrom.oldCategories)
    },
    // 新建文章、编辑文章
    async editArticle () {
      console.log('id?', this.isBuild)  // 为true表明是没有获取到所选文章信息，是添加新文章
      if (this.isBuild) {
        // 新建文章
        // 因为你和我声明的对象是不同的，里面的参数名，所以要声明一个新的对象，里面的参数名要与api文档的相一致，才能调用成功
       // 打印看一下
       console.log('文章内容', this.articleInfo)

        const articleUpLoad = {
          articleDescription: this.articleInfo.articleDescription,
          articleName: this.articleInfo.articleName,
          classifyName: this.articleInfo.classifyName,
          labelName: this.articleInfo.labelName,
          value: this.articleInfo.value
        }
        axios.post('http://31f747b701.qicp.vip/blog/article-blog/insert',
         {articleUpLoad: articleUpLoad}
        )
//         let postData = this.$qs.stringify({
//           articleDescription: this.articleInfo.articleDescription,
//           articleName: this.articleInfo.articleName,
//           classifyName: this.articleInfo.classifyName,
//           labelName: this.articleInfo.labelName,
//           value: this.articleInfo.value,
// });
 
      // this.axios.post('blog/article-blog/insert',this.$qs.stringify({
      //           articleDescription: this.articleInfo.articleDescription,
      //           articleName: this.articleInfo.articleName,
      //           classifyName: this.articleInfo.classifyName,
      //           labelName: this.articleInfo.labelName,
      //           value: this.articleInfo.value
      //   }))
        
      console.log('ff')
        
        // if (res.code !== 200) return this.$message.error('翻车就睡觉！')
        this.$message.success('发布文章成功，等待后台管理员审核！')
      } else {
        // 编辑文章
        this.editArticleFrom.id = this.articleInfo.articleId
        this.editArticleFrom.articleDescription = this.articleInfo.articleDescription // 太难受了，因为字段不同的原因要每一项赋值，以匹配后端的参数，本来直接this.artcleInfo就可以
        this.editArticleFrom.articleName = this.articleInfo.articleName
        this.editArticleFrom.classifyName = this.articleInfo.classifyName
        this.editArticleFrom.labelName = this.articleInfo.labelName
        this.editArticleFrom.value = this.articleInfo.value

        const { data: res } = await this.$axios.post('http://31f747b701.qicp.vip/blog/article-blog/update', this.editArticleFrom)
        console.log('编辑文章')
        console.log(res)
        if (res.code !== 200) return
        this.$message.success('编辑文章成功，等待后台管理员审核！')
      }
    },
    // 获取所有分类
    async getClass () {
      const { data: res } = await this.$axios.get('http://31f747b701.qicp.vip/blog/classify-blog/list')
      console.log('所有分类', res)
      if (res.code !== 200) return
      this.classList = res.data
      console.log('res.data', this.classList)
    },
    // 返回事件
    goBack () {
      this.$router.push('/category')
    }
  },

  created () {
    // 可以获取路由路径中的路径参数 blogId
    const blogId = this.$route.params.blogId
    if (blogId) {
      this.getArticle(blogId)
      this.isBuild = false
    } else {
      this.articleInfo = {}
      this.isBuild = true
    }
    this.getClass()
  }

}
</script>

<style lang="less" scoped>
.mavon{
  min-height: 400px !important;
}
.blogEdit_box{
  padding: 2% 5%;
  .el-page-header{
    margin-bottom: 3%;
  }
  .content_edit{
    z-index: 1;
    min-height: 600px;
  }
}
</style>
